{% extends "layout_index.html" %}
{% load static %}

{% block title %}
    <title>添加{{ title }}</title>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/add.css' %}">
{% endblock %}

{% block main_content %}
    <div class="form-container">
        <div class="form-header">
            <h3><i class="fa-solid fa-user-plus"></i> 添加{{ title }}</h3>
        </div>
        
        <form method="post" novalidate>
            {% csrf_token %}
            
            {% for field in form %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                    {% if field.errors %}
                        <span class="text-danger">
                            <i class="fa-solid fa-circle-exclamation"></i> 
                            {{ field.errors.0 }}
                        </span>
                    {% endif %}
                </div>
            {% endfor %}

            <div class="btn-container">
                <a href="{% url 'index' %}" class="btn btn-back">
                    <i class="fa-solid fa-arrow-left"></i> 返回首页
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-check"></i> 提交
                </button>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
<script>
    // 自动聚焦第一个输入框
    $(function() {
        $('form input:first').focus();
    });
</script>
{% endblock %}
